<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        /*
        需求：
        1.选择第一个div
        2.选择最后一个class为box的元素
        3.选择所有class属性不为box的div
        4.选择第二个和第三个li元素
        5.选择内容为BBBBB的li
        6.选择隐藏的li
        7.选择有title属性的li元素
        8.选择所有属性title为hello的li元素
        */
        
        //1.选择第一个div
        $(function(){
            var $firstdiv=$("div:first");
            $firstdiv.css("background-color","red");
        })

        //2.选择最后一个class为box的元素
        $(function(){
            var $lastclss_box=$(".box:last");
            $lastclss_box.css("font-size","30px");
        })

        //3.选择所有class属性不为box的div
        $(function(){
            var $class_unbox=$("div:not(.box)");
            $class_unbox.css("color","blue");
        })

        //4.选择第二个和第三个li元素
        //原理：gt(x)==》从第一个开始数x+1个剔除，然后lt(y)==>数y个
        $(function(){
            var $li_gtlt=$("li:gt(0):lt(2)");
            $li_gtlt.css("text-decoration","underline");
        })

        //5.选择内容为BBBBB的li
        $(function(){
            var $li_contains=$("li:contains('BBBBB')");
            $li_contains.css("font-family","华文彩云");
        })

        //6.选择隐藏的li
        $(function(){
            var $li_hiidden=$("li:hidden");
            console.log($li_hiidden.html());
        })

        //7.选择有title属性的li元素
        $(function(){
            var $li_title=$("li[title]");
            $li_title.css("background-color","blue");
        })

        //8.选择所有属性title为hello的li元素
        $(function(){
            var $li_titlehello=$("li[title='hello']");
            $li_titlehello.css("height","100px")
        })
    </script>
</head>
<body>
    <div id="div1" class="box">class为box的div1</div>
    <div id="div2" class="box">class为box的div2</div>
    <div id="div3">div3</div>
    <span class="box">class为box的span</span>
    <br>
    <ul>
        <li>AAAAA</li>
        <li title="hello">BBBBB</li>
        <li class="box">CCCCC</li>
        <li title="hello">DDDDD</li>
        <li title="two">BBBBB</li>
        <li style="display: none;" >我本来是隐藏的</li>
    </ul>
    <!--
        在原有选择器匹配的元素中进一步进行过滤的选择器
            基本
            内容
            可见性
            属性
    -->
</body>
</html>